<template>
<validator name="dyCodeForm">
  <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
      <div class="form-group">
        <p>我们已经发送一条验证短信至<span class="primary">{{account.username}}</span></p>
      </div>
      <div class="form-group">
        <p>请输入短信中的验证码</p>
      </div>
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" v-model="account.dyCode" initial="off" detect-change="off"  placeholder="请输入验证码" v-validate:dy-code="['required']">
          <span class="input-group-btn">
            <button class="btn btn-default" :disabled="state.resendTime" v-on:click.prevent="reResendSms" >重新发送<span v-show="state.resendTime">{{'('+state.resendTime+')'}}</span></button>
          </span>
        </div>
        <div>
          <error-template v-show="$dyCodeForm.dyCode.required">{{$dyCodeForm.dyCode.required}}</error-template>
        </div>
      </div>
      <div class="form-group">
          <button type="button" v-on:click.prevent="validDyCode" class="form-control btn btn-success register">下一步</button>
      </div>
      <div class="form-group">
          <button type="button" v-on:click.prevent="goBack" class="form-control btn btn-default register">返回</button>
      </div>
  </form>
</validator>
<div class="clearfix"></div>
</template>
<script>
import * as checkService from 'src/api/check'
export default {
  props: {
    account: {
      type: Object,
      required: true
    },
    state: {
      type: Object,
      required: true
    }
  },
  methods: {
    validDyCode () {
      var self = this
      this.$validate(() => {
        if (self.$dyCodeForm.invalid) {
          return
        }
        var account = self.account
        checkService.verifysmsregistercaptcha(account)
        .then(() => {
          self.state.step++
        }).catch((data) => {
          self.$notify({
            type: 'error',
            message: data
          })
        })
      })
    },
    reResendSms () {
      this.$dispatch('sendSms')
    },
    goBack () {
      this.state.step--
    }
  }
}
</script>